import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Checkbox, Modal, Toast } from 'antd-mobile'
import {
    ADD_ITEM,
    DEL_ITEM,
    REMOVE_ITEM,
    CHANGE_ITEM_CHECKED,
    CHANGE_CHECK
} from '../../store/actions/car'

const alert = Modal.alert;


export class Car extends Component {
    state = {
        isAll: true
    }
    changeAllChecked = (ev) => {
        this.props.changeItemCheck(ev.target.checked)

        // this.setState({
        //     isAll: !this.state.isAll
        // }, () => {
        //     this.props.changeItemCheck(this.state.isAll)
        // })
    }
    render() {
        const { car, addItem, delItem, changeCheck, allPrice, flag } = this.props
        const { isAll } = this.state
        console.log(flag)
        return (
            <div>
                {
                    car.map((item, index) => {
                        return <div className='classify_box' key={item.id}>
                            <div className='img_box'>
                                <Checkbox checked={item.isCheck} onChange={() => {
                                    changeCheck(index)
                                    this.setState({
                                        isAll: flag
                                    })
                                }} />
                            </div>
                            <div className='price_box'>
                                <h4>
                                    {item.title}
                                </h4>
                                <p>
                                    {item.price}
                                </p>
                            </div>
                            <div className='count_box'>
                                <button onClick={() => {
                                    delItem(item.count, index)
                                }}>--</button>
                                {item.count}
                                <button onClick={() => {
                                    addItem(item)
                                }}>++</button>
                            </div>
                        </div>
                    })
                }
                {
                    car.length > 0 ? <div>
                        全选: <Checkbox checked={flag} onChange={this.changeAllChecked} />
                        <div>
                            总价 ： {allPrice.toFixed(2)}
                        </div>
                    </div> : "无数据"
                }
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    console.log(state)
    const { car } = state
    const { list, allPrice, flag } = car
    return {
        car: list,
        allPrice,
        flag
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        addItem(item) {
            dispatch({ type: ADD_ITEM, item })
        },
        delItem(count, index) {
            if (count > 1) {
                dispatch({ type: DEL_ITEM, index })
            } else {
                alert('删除', '确定要删除数据么？', [
                    { text: '取消', onPress: () => Toast.info("取消删除"), style: 'default' },
                    {
                        text: '确定', onPress: () => {
                            dispatch({ type: REMOVE_ITEM, index })
                            Toast.success("删除成功")
                        }
                    },
                ]);
            }
        },
        changeItemCheck(checked) {
            dispatch({ type: CHANGE_ITEM_CHECKED, checked })
        },
        changeCheck(index) {
            dispatch({ type: CHANGE_CHECK, index })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Car)
